vue3

2024-07-08 15:24| 来源: 网络整理| 查看: 265

vue3所开发的通常是单页面的应用，通常的做法是先创建一个xxx.vue作为主体框架，以一个 admin风格的页面为例，通常包括顶部、左侧边栏、中间核心内容区域等，具体可参考ElementPlus页面的例子（ Container 布局容器 | Element Plus (gitee.io)）。通过点击左侧边栏，在中间区域显示具体某个页面（在vue中其实是组件）的内容。

但是，对于像登录页、404页等页面，如果也以此上述vue文件为框架，则相当于登录页面左侧也同样会显示侧边栏，这不符合要求。

因此，在本项目中，通过使用多级路由的方式，实现登录页面与业务功能页面相互分离。

App.vue

app.vue仅需一个空白的页面即可。

MainView.vue

一个简单的样例如下：

PROJECT 首页主机管理 OpenStack 创建虚机 Linux 系统设置 LogOut {{ username }} Login.vue 用户登录用户密码登录 import axios from 'axios'; import { ElMessage } from 'element-plus'; import router from '@/router/index.js' import store from '@/stores/index.js' export default { data() { return { user: { username:'', password:'' } } }, methods: { doLogin() { } } } router/index.js

关键点来了，看代码

import MainView from '../views/MainView.vue' import LoginView from '../views/Login.vue' const router = createRouter({ history: createWebHistory(importa.env.BASE_URL), routes: [ { path: '/', name: 'Home', component: MainView }, { path: '/host', name: 'Host', component: () => import('../views/MainView.vue'), children:[ { path: 'openstack/aaa', name: 'aaaaa', component: () => import('@/components/OpenstackAaaaaa.vue'), meta:{ } }, { path: 'linux/bbb', name: 'xxxxxx', component: () => import('@/components/LinuxBbbbbb.vue'), meta:{ } } ] }, { path: '/login', name: 'Login', component: () => import('@/views/Login.vue'), meta:{title:"登录"} }, { path: '/:pathMatch(.*)*', name: 'NoFound', component: () => import('@/views/404.vue'), meta:{title:"404"} }, ] })

【本文地址】

vue3

vue3

今日新闻

推荐新闻